<template>
  <div class="head_bar" :class="$store.state.isCollapse?'position-collapse-left':'position-left'">
    <el-menu class="el-menu-demo" mode="horizontal" background-color="#fff" text-color="#000" active-text-color="#000">
      <!-- 导航收缩按钮 -->
      <el-menu-item index="1" @click="changeCollapse" v-if="!isMobileFlag">
        <i class="iconfont icon-daohang"></i>
      </el-menu-item>
      <el-submenu index="2" class="avatar">
        <template slot="title">
          <span v-if="!isMobileFlag">{{userInfo.username}}</span>
          <img src="@/assets/avatar2.png" />
        </template>
        <el-menu-item index="2-1" @click="goUserInfo">用户信息</el-menu-item>
        <el-menu-item index="2-2" @click="logOut">注销</el-menu-item>
      </el-submenu>
      <el-menu-item class="message_box">
        <el-dropdown @command="goMessage">
          <span class="el-dropdown-link">
            <el-badge :value="messageNumber" :max="99" :hidden="messageNumber === 0" class="badge">
              <i class="iconfont icon-informatiom"></i>
            </el-badge>
          </span>
          <el-dropdown-menu slot="dropdown">
            <p v-if="messageList.length <= 0" class="no_more">暂无未读消息</p>
            <el-dropdown-item v-else v-for="(item, index) in messageList" :key="index" :command="item.id">
              <p class="message-title">{{item.title}}</p>
              <p class="message-time">{{item.remindDate | formatTime}}</p>
            </el-dropdown-item>
            <el-dropdown-item command="more">
              <p class="message-more">查看所有消息</p>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        messageList: [],
        messageNumber: 0,
        isMobileFlag: this.$utils.isMobile(),
        showMoney: true,
        param: {
          status: 1,
          pageNo: 1,
          pageSize: 5
        },
        userInfo: {}
      };
    },
    computed: {
      user() {
        return this.$store.state.user;
      }
    },
    watch: {
      user(val) {
        this.userInfo = val;
      }
    },
    mounted() {},
    methods: {
      goMessage(command) {
        console.log(command);
        if (command === "more") {
          this.$router.push({
            path: "/person/message"
          });
        }
      },
      getUserInfo() {
        this.$api.user.GetUserInfo().then(res => {
          this.$store.commit("setUserInfo", res.data.userInfo);
          this.$message.success("刷新成功");
        });
      },
      goUserInfo() {
        this.$router.push({
          path: "/person/info"
        });
      },
      logOut() {
        setCookie("token", "", 0);
        this.$message.success("注销成功");
        this.$router.push({
          path: "/login"
        });
      },
      changeCollapse() {
        //改变导航栏状态
        this.$store.commit("changeCollapse");
      },
      getMessageList() {
        this.$api.user.pagingMessage(this.param).then(res => {
          this.messageList = res.data.list;
          this.messageNumber = res.data.total;
        });
      }
    },
    created() {
      this.getMessageList();
    }
  };
</script>

<style lang="scss" scoped>
  /* 改变主题色变量 */
  $--color-primary: #409eff;
  /* 改变 icon 字体路径变量，必需 */
  $--font-path: "~element-ui/lib/theme-chalk/fonts";
  @import "~element-ui/packages/theme-chalk/src/index";

  .head_bar {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1030;
    transition: 0.5s;
    line-height: 64px;

    .el-menu {
      height: 64px;

      .el-menu-item {
        border: none;

        i {
          color: black;
        }
      }

      .message_box {
        padding: 0;
        float: right;

        .iconfont {
          margin: 0 20px;
          font-size: 30px;
        }
      }

      .avatar {
        float: right;

        span {
          color: black;
          font-size: 20px;
        }

        img {
          margin-left: 10px;
          border-radius: 5px;
          width: 40px;
          height: 40px;
        }
      }
    }
  }

  .position-left {
    left: 201px;
  }

  .position-collapse-left {
    left: 65px;
  }

  .no_more {
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-bottom: 1px solid #dedede;
  }

  .el-dropdown-menu__item {
    +.el-dropdown-menu__item {
      border-top: 1px solid #dedede;
    }

    .message-title {
      width: 350px;
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .message-time {
      width: 350px;
      font-size: 14px;
      color: #9e9e9e;
    }

    .message-more {
      width: 350px;
      text-align: center;
    }
  }
</style>
